<template>
  <div class="navBar">
    <nav class="nav" v-if="$route.name!=='viewpointWrite'">
      <a href="/" class='logo fl'>
        <h1><img src="../assets/res/img/LOGO.png"></h1>
      </a>
      <div class="layui-nav">
        <ul id="nav">
          <li class="layui-nav-item" :class="{'layui-this':$route.name ==='home'}">
            <a @click="$router.push('/')" href="javascript: void(0)" class="ftz18">首页</a>
          </li>
          <li class="layui-nav-item" :class="{'layui-this':/liveIndex/.test($route.path)}">
            <router-link tag="a" to="/liveIndex" target="_blank" class="ftz18">
              直播
            </router-link>
          </li>
          <!-- <li class="layui-nav-item" :class="{'layui-this':/qa/.test($route.path)}">
            <router-link tag="a" to="/qa"  target="_blank" class="ftz18">
              问答
            </router-link>
          </li> -->
          <li class="layui-nav-item" :class="{'layui-this': $route.path === '/viewpoint'}">
            <router-link tag="a" to="/viewpoint" target="_blank" class="ftz18">
              观点
            </router-link>
          </li>
          <!-- <li class="layui-nav-item" :class="{'layui-this': $route.path === '/plan'}">
             <router-link tag="a" to="/plan"  target="_blank" class="ftz18">
              计划
            </router-link>
          </li> -->
          <li class="layui-nav-item" :class="{'layui-this': $route.path === '/marketView'}">
            <router-link tag="a" to="/marketView" target="_blank" class="ftz18">
              行情
            </router-link>
          </li>
          <li class="layui-nav-item" :class="{'layui-this': $route.path === '/superior'}">
            <router-link tag="a" to="/superior" target="_blank" class="ftz18">
              找高手
            </router-link>
          </li>
          <!-- <li class="layui-nav-item" :class="{'layui-this': $route.path === '/apply'}">
             <router-link tag="a" to="/apply"  target="_blank" class="ftz18">
              申请入驻
            </router-link>
          </li> -->
        </ul>
      </div>
      <div class="fr login">
        <router-link v-if="!/apply/.test($route.path)" to="/apply" target="_blank" tag="a">
          <button type="button" class="applyBtn layui-btn layui-btn-radius layui-btn-primary layui-btn-sm">申请入驻</button>
        </router-link>
        <div class="icon icon-ecode">
          <div class="ecode"><img src="../assets/res/img/ecode.png"></div>
        </div>
        <div my class="layui-nav-item photo layui-nav" href="javascript: void(0)" v-if="userId">
          <a href="javascript:void(0)" class="ftz18">
            <img :src="me.sysUser.avatar">
            <span class="layui-icon layui-icon-up"></span>
          </a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript: void(0)" @click="linkToDashboard()" class="ftz16">个人中心</a>
            </dd>
            <dd>
              <a href="javascript: void(0)" @click="logout()" class="ftz16">退出</a>
            </dd>
          </dl>
        </div>
        <a v-if="!userId" href="javascript:void(0)" onclick="loginPop.open('login')" class="ftz16">登录</a>
        <i v-if="!userId" class="line"></i>
        <a v-if="!userId" href="javascript:void(0)" onclick="loginPop.open('reg')" class="ftz16">注册</a>
      </div>
    </nav>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      defaultAvatar: '',
      defaultImg: ''
    }
  },
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    },
    ...mapState({
      me: state => state.me,
      userInfo: state => state.me.sysUser || {}
    })
  },
  mounted () {
    setTimeout(() => {
      window.layui.use(['layer', 'form', 'element'], function () {
        // layer
        let form = window.layui.form
        let element = window.layui.element
        form.render()
        element.render()
        let $ = window.$
        $('.nav [my]').hover(function () {
          $(this).find('span').removeClass('layui-icon-up')
          $(this).find('span').addClass('layui-icon-down')
        }, function () {
          $(this).find('span').removeClass('layui-icon-down')
          $(this).find('span').addClass('layui-icon-up')
        })
      })
    }, 1000)
  },
  methods: {
    async logout () {
      this.$store.dispatch('loginOut')
    },
    linkToDashboard () {
      if (this.userInfo.authType === '0') {
        this.$router.push('/dashboardUser/live')
      } else {
        this.$router.push('/dashboardAuth')
      }
    },
    linkToUser () {
      var winHandler = window.open('', '_blank')
      if (/\.zhongyi9999\.com/.test(window.location.href)) {
        winHandler.location.href = '//open.zhongyi9999.com'
      }
      if (/\.hxkjtest\.com/.test(window.location.href)) {
        winHandler.location.href = '//open.hxkjtest.com'
      }
    }
  }
}
</script>
<style lang="scss">
.navBar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
  border-bottom: 1px solid #e6e6e6;
  .applyBtn {
    background: #f23e3e;
    border: none;
    color: #fff;
    padding: 0px 20px;
  }
  .photo {
    width: 85px;
    height: 66px;
    display: inline-block;
    position: relative;
  }
  .photo img {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  // .user-name,
  // .login-out {
  //   color: $red;
  // }
  // .login-out {
  //   padding-left: 10px;
  // }
  .layui-nav .layui-nav-child a {
    padding: 0px 20px;
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
  }
  .layui-nav .layui-nav-child a:hover {
    background: #f23e3e;
    color: #fff;
  }
  .layui-nav-item:hover .layui-nav-child {
    display: block;
  }
  .layui-nav-bar {
    display: none;
  }
}
</style>
